{extend name="main"}
{block name="body"}
<div class="bg-white p-3">
<el-form :model="form" @submit.native.prevent="submitForm" :rules="rules" ref="form" label-width="120px" :label-position="labelPosition">

  <el-form-item label="角色名称" prop="title">
    <el-input v-model="form.title" class="col-12 col-sm-3 pl-0 pr-0" placeholder="Title"></el-input>
  </el-form-item>
  <el-form-item v-for="(v,index) in auth">
	<el-checkbox v-model="form.auth" :label="v.aid" :key="v.aid" @change="handleCheckAllChange(v)">{{v.title}}</el-checkbox>
	<el-checkbox-group v-model="form.auth" v-for="(va,n) in v.data" @change="handleCheckedCitiesChange($event,v)">
		<el-checkbox :label="va.aid" :key="va.aid">{{va.title}}</el-checkbox>
		<el-checkbox v-for="(val,k) in va.data" :label="val.aid" :key="val.aid">{{val.title}}</el-checkbox>
	</el-checkbox-group>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('form')">立即保存</el-button>
    <el-button @click="resetForm('form')">重置</el-button>
  </el-form-item>
</el-form>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
	{empty name="auth"}
	var authCate=[];
	{else/}
	var authCate={:json_encode($auth,JSON_UNESCAPED_UNICODE)};
	{/empty}
	{empty name="rightDefault"}
	var rightDefault=[];
	{else/}
	var rightDefault={:json_encode($rightDefault,JSON_UNESCAPED_UNICODE)};
	{/empty}
	{empty name="Find"}
	var url='/addRole';
	var is_edit=false;
	var formData={
			title:'',
      		auth:rightDefault,
			};
	{else/}
	var is_edit=true;
	var url='/editRole/{$Find.rid}';
	var formData={:json_encode($Find,JSON_UNESCAPED_UNICODE)};
	{/empty}
</script>
<script type="text/javascript">
	var vm=new Vue({
		el:'#app',
		data:{
			view:XYBase.view,
			auth: authCate,
			rightDefault: rightDefault,
			labelPosition:'right',
			form:formData,
			is_edit:is_edit,
			isIndeterminate: true,
        	checkAll: false,
	        rules: {
		      title: [
		        { required: true, message: '请输入角色名称', trigger: 'blur' },
		        { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
		      ],
		      auth: [
		        { required: true, message: '请勾选至少一个授权', trigger: 'blur' },
		      ],
	        }
		},
		watch:{
		    view:XYBase.viewWatch,
		},
		created(){
			XYBase.created(this);
		},
		methods:{
		    handleCheckAllChange(val) {
		    	if (this.form.auth.indexOf(val.aid)<0) {
		    		if (typeof val.data!="undefined") {
				    	for (var i = 0; i < val.data.length; i++) {
				    		var index=this.form.auth.indexOf(val.data[i].aid);
					    	if (index>-1) {
					    		this.form.auth.splice(index,1);
					    	}
		    				if (typeof val.data[i].data!="undefined") {
						    	for (var n = 0; n < val.data[i].data.length; n++) {
						    		var index=this.form.auth.indexOf(val.data[i].data[n].aid);
							    	if (index>-1) {
							    		this.form.auth.splice(index,1);
							    	}
						    	}
					    	}
				    	}
			    	}
		    	}else{
		    		if (typeof val.data!="undefined") {
				    	for (var i = 0; i < val.data.length; i++) {
				    		var index=this.form.auth.indexOf(val.data[i].aid);
					    	if (index<0) {
					    		this.form.auth.push(val.data[i].aid);
					    	}
		    				if (typeof val.data[i].data!="undefined") {
						    	for (var n = 0; n < val.data[i].data.length; n++) {
						    		var index=this.form.auth.indexOf(val.data[i].data[n].aid);
							    	if (index<0) {
							    		this.form.auth.push(val.data[i].data[n].aid);
							    	}
						    	}
					    	}
				    	}
		    		}
		    	}
		    },
		    handleCheckedCitiesChange(obj,val) {
		    	if (this.form.auth.indexOf(val.aid)<0) {
		    		this.form.auth.push(val.aid);
		    	}
		    },
			submitForm:function(formName) {
				var _this=this;
				var D=_this.form;
				_this.$refs[formName].validate((valid) => {
				  if (valid) {
					const loading = XYBase.openloading();
					$.ajax({
						url:url,
						data:D,
						type:'post',
						dataType:'json',
						success:function(ret){
					        loading.close();
					        if (ret) {
								if(ret.code == 0){
									XYBase.success(ret.msg);
									if(!_this.is_edit){
										_this.resetForm(formName);
									}
								}else{
									XYBase.msg(ret.msg);
								}
					        }else{
				          		XYBase.error(XYBase.config.system_network_error)
					        }
						},
						error:function(err){
					        loading.close();
				          	XYBase.error(XYBase.config.system_network_error)
						}
					});
				  } else {
					XYBase.warning('请先把表单填写完整。');
				    return false;
				  }
				});
			},
			resetForm:function(formName) {
				this.$refs[formName].resetFields();
			},
		}
	});
$(function(){
	reloadWindowSize();
	$(window).resize(function(){
		reloadWindowSize();
	});
});
function reloadWindowSize (argument) {
	var winW=$(window).width();
	if(winW <= 576){
		vm.labelPosition='top';
	}else{
		vm.labelPosition='right';
	}
}
</script>
{/block}